今日主題

進度回顧
Day 16 從錢包到腦袋：待讀清單的消化速度與週末清倉

昨天的進度是幫自己做一個可以整合待讀清單的頁面，並且統計消滅速度和週末清倉玩法。
但仔細想了一下，沒道理連結還要自己開頁面儲存，這有點糟。

所以今日目標：做個簡單的 Chrome Extention，看到想存的就點選保存，直接寫入頁面。

為什麼想做

• 提升效率：省去跨頁面切換時間，越少人工越好
• 難度評估：使用其他知識類筆記工具，基本上都有快捷鍵直接存入功能。所以預期上，這功能應該不會是非常複雜跟算常見

思考怎麼做

📁 Chrome Extention 基本功能
TreasureVault-Extension/
├── manifest.json
├── popup.html
└── popup.js

1. manifest.json - 擴充功能的「身分證」
   重點原理紀錄：

• activeTab：讓擴充功能可以讀取當前分頁的資訊（標題、網址）
• storage：可以儲存資料到瀏覽器本地
• action.default_popup：點擊擴充功能圖示時顯示的彈窗

2. popup.html - 使用者介面
   這是用戶點擊擴充功能圖示時看到的彈窗介面。
   設計亮點：

• 深色主題
• 漸層按鈕
• 響應式設計
• 資訊展示：清楚顯示頁面標題和網址

3. popup.js - 處理所有互動邏輯
   關鍵功能紀錄：

• 頁面資訊獲取
  • 使用 Chrome API 取得當前分頁資訊
  • 包含標題、網址等資料 (移除標題開頭的數字格式，如 "(656) 標題" → "標題")
  • 標題清理功能
• 跳轉保存機制
• 跳轉到指定網頁
• 透過 URL 參數傳遞資料：url、title、auto_save
• 網頁應用接收到這些參數後自動保存跳轉保存機制

4. 最後設計個想要的 icon
   

📁 整體資料流
網頁 → 擴充功能 → URL參數 → 你的網頁應用 → 資料庫

📁 安裝到 Chrome

• 瀏覽器：chrome://extensions/
• 「開發人員模式」
• 點擊「載入未封裝項目」
• 選擇資料夾

成果校驗：完成度100%

隨機開啟一個 YT影音，點選 Extention (貓爪)

跳轉預填入頁面

Save，清單顯示該筆資料

今日總結

主要想先實驗小型的 Chrome extension 功能，除了幫自己省一點時間，之後如果要做其他應用，也先當基本功練

我做了什麼

• 先確認目前資料欄位
• 釐清在哪個工具上處理
  *這個紀錄網站是建置在 BASE44 上，包括資料庫，因此預期依照現有資料狀況撰寫 extension 程式碼會最省事，出錯率最低

AI 幫了我什麼

• 除了Code，還是 Code

遇到的挑戰

• 目前流程雖然順暢，但如果跳轉到紀錄頁面，其實也有可能是干擾，照理說點選 Extention 功能後，就在背景執行完畢，直接進資料庫，不用顯示前端。

累計下一步清單

合計第8/16/17天做完待優化項目

• 趣味性

  • 情境上如果要更 RPG 風格，在每完成一筆儲存或是特定CTA，應該也可以有動畫或者是音效功能，單純就是娛樂性考量

• 功能性

  • 影音或文章自動抓取預覽或標題~ Somehow一定有什麼規則，還沒弄懂

• 易用性

  • 建立後端函數來接收資料 Chrome Extention 觸發的資料